<template>
    <!-- 防止打开popup滚动层穿透 -->
    <!-- 输入评论 -->
    <view class="comment-input-container" :style="{ bottom: bottom + 'px' }">
        <view class="comment-input">
            <text v-if="!isInputing" class="iconfont icon-icon_shiting-shuodianshimo"></text>
            <input :focus="isFocused" class="input" v-model="input" placeholder="说点什么吧..."
                placeholder-class="input-placeholder" :adjust-position="false" @focus="inputFocus" @blur="inputBlur"
                confirm-type="send" @confirm="sendComment()" />
        </view>
        <view v-if="!isInputing && iconShow" class="icon">
            <!-- 点赞 -->
            <view class="item">
                <text v-if="!item1?.like" class="iconfont icon-dianzan1" @tap="givelike(item1!)"></text>
                <text v-else class="iconfont icon-dianzan-filled" @tap="givelike(item1!)"></text>
            </view>
            <!-- 收藏 -->
            <view class="item">
                <text v-if="!item1?.favorite" class="iconfont icon-shoucang" @tap="giveFavorite()"></text>
                <text v-else class="iconfont icon-shoucang-filled" @tap="cancelFavorite(item1!)"></text>
            </view>
        </view>
        <!-- 收藏列表 -->
        <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff" @change="change">
            <FavoritePop @close="close" @open="open" :folderList="folderList" :id="item1?.id" :module="0"></FavoritePop>
        </uni-popup>
        <!-- 新增 -->
        <uni-popup ref="addFolderPop" :mask-click="false">
            <view class="addNewFolder-container">
                <view class="title">新建收藏夹</view>
                <input class="folderName" type="text" placeholder="请输入收藏夹名称" :adjust-position="false"
                    v-model="folderName">
                <view class="footer">
                    <view @tap="hide" class="cancel">取消</view>
                    <view @tap="addFolder" class="confirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>

</template>
<script setup lang="ts">
import FavoritePop from '@/components/FavoritePop.vue';
import { API_addFolder, API_getFolder, API_removeCollection } from '@/service/favorite';
import type { DetailArticle, Comment } from '@/type/article';
import { API_giveAlike, API_getComment, API_addComment } from '@/service/article'
import { ref } from 'vue';
import type { Folder } from '@/type/favorite';
import type { interviewDetail, interviewItem } from '@/type/interview'
import { onLoad } from '@dcloudio/uni-app';
const isFocused = ref<boolean>(false);
const inputRef = ref<any>();
//控制弹出层显示
const addFolderPop = ref<any>("");
const folderName = ref<string>("");
const popup = ref<any>("");
const input = ref<string>('');
const bottom = ref<number>(0);
const folderList = ref<Folder[]>([]);
const parentCommentId = ref<number>(0);
const emit = defineEmits(['favoritePopup', 'sendSuccess']);
const sendComment = async () => {
    let id = -1;
    let module = 0;
    if (props.item1) {
        module = 0;
        id = props.item1?.id;
    }
    if (props.item2) {
        module = 1;
        id = props.item2.id;
    }
    const res = await API_addComment(
        module,
        id,
        input.value,
        parentCommentId.value);
    if (res.code === 1) {
        uni.showToast({
            title: '您的评论已发布',
            icon: 'none',
            mask: true
        })
        setTimeout(() => {
            emit('sendSuccess');
        }, 500)
    } else {
        uni.showToast({
            title: '请求错误',
            icon: 'none',
            mask: true
        })
    }
    isInputing.value = false;
    isFocused.value = false;
    input.value = "";
}
// 防止滚动穿透
const change = (e: any) => {
    emit('favoritePopup', e.show);
}
// 关闭收藏列表pop
const close = (favorite: boolean | null) => {
    if (favorite != null) {
        props.item1.favorite = favorite;
    }
    popup.value.close();
}
// 打开新建收藏pop
const open = async () => {
    addFolderPop.value.open();
}
// 关闭新建收藏夹列表
const hide = () => {
    addFolderPop.value.close();
}
//是否正在输入
const isInputing = ref<boolean>(false);
//获得焦点
const inputFocus = (e: any) => {
    bottom.value = e.detail.height;
    isInputing.value = true;
}
//失去焦点
const inputBlur = () => {
    bottom.value = 0;
    isInputing.value = false;
    isFocused.value = false;
}
const replyFocus = (item: Comment) => {
    isFocused.value = true;
    parentCommentId.value = item.id;
}
//新建收藏夹
const addFolder = async () => {
    for (let i = 0; i < folderList.value.length; i++) {
        if (folderList.value[i].collectionName === folderName.value) {
            uni.showToast({
                title: '收藏夹名称不能重复',
                icon: 'none',
                mask: true
            })
            return;
        }
    }
    //获取时间戳
    const stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
    // 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
    const beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);

    let res = await API_addFolder({
        collection_name: folderName.value,
        create_time: beijingTime,
        module: 0
    })
    if (res.code === 1) {
        uni.showToast({
            title: '新建成功',
            icon: 'success',
            mask: true
        })
        giveFavorite();

    } else {
        uni.showToast({
            title: '新建失败',
            icon: 'none',
            mask: true
        })
    }
    hide();
    folderName.value = "";
}
// 点赞
const givelike = async (item: DetailArticle) => {
    let res = await API_giveAlike(item.id, !item.like);
    if (res.code) {
        item.like = !item.like;
        item.likesCount = item.likesCount + (item.like ? 1 : -1);
    }
}
// 收藏
const giveFavorite = async () => {
    popup.value.open();
    const res = await API_getFolder(0);
    folderList.value = res.data;
}
//取消收藏
const cancelFavorite = async (item: DetailArticle) => {
    const res = await API_removeCollection({
        content_id: item.id,
        module: 0
    })
    if (res.code === 1) {
        uni.showToast({
            title: '取消收藏成功',
            icon: 'none',
            mask: true
        })
        props.item1.favorite = false;
    } else {
        uni.showToast({
            title: '取消收藏失败',
            icon: 'none',
            mask: true
        })
    }
}
const props = defineProps<{
    //传入的图标数据
    item1: DetailArticle,
    item2: interviewDetail,
    //是否要显示右边的icon
    iconShow: boolean;
    category: {
        type: number,
        default: () => 0
    }
}>();
//评论时调起键盘
defineExpose({ replyFocus });
</script>
<style scoped lang="scss">
.comment-input-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1rpx solid #ddd;
    padding: 20rpx;
    padding-bottom: Max(24rpx, env(safe-area-inset-top));
    /* 兼容 iPhone X 及以上设备 */
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0;

    .comment-input {
        flex: 3;
        display: flex;
        align-items: center;
        background-color: #ddd;
        font-size: 28rpx;
        border-radius: 42rpx;
        padding: 10rpx;

        .input {
            width: 100%;
            padding: 0 10rpx;
        }

    }

    .icon {
        flex: 1;
        display: flex;

        .iconfont {
            font-size: 50rpx;
            margin-left: 30rpx;
        }

    }
}

.addNewFolder-container {
    position: fixed;
    width: 500rpx;
    left: calc(50vw - 250rpx);
    bottom: calc(50vh);
    border: 1rpx solid #ddd;
    background: #fff;
    border-radius: 10rpx;
    font-size: 30rpx;

    .title {
        padding-top: 30rpx;
        text-align: center;
        font-weight: 700;
    }

    .folderName {
        margin: 30rpx;
        padding: 10rpx;
        border: 1rpx solid #ddd;
        border-radius: 20rpx;
    }

    .footer {
        display: flex;
        // justify-content: space-around;
        // align-items: center;
        border-top: 1rpx solid #ddd;


        .cancel {
            padding: 20rpx 0;
            flex: 1;
            text-align: center;
        }

        .confirm {
            padding: 20rpx 0;
            flex: 1;
            text-align: center;
            border-left: 1rpx solid #ddd;
            color: $color-main;
        }

    }
}
</style>
